<template>
  <div class="box">
    <h1>A组件，{{ counter.num }}</h1>
    <button @click="handleNum">+</button>
    <button @click="handleAdd">新增商品</button>
    <div v-for="item in goods.list">{{ item.name }} --- {{ item.price }}</div>
  </div>
</template>

<script setup lang="ts">
import { useCounter } from "../../store/count";
import { useGoods } from "../../store/goods";

const counter = useCounter(); //得到count数据模块中所有内容
const handleNum = () => {
  counter.num++;
};

// 提取商品数据
const goods = useGoods();
const handleAdd = () => {
  // 通过触发action修改数据
  goods.addGoods({
    name: "新商品",
    price: Math.round(Math.random() * 500 + 300),
  });
};
</script>

<style scoped>
.box {
  height: 500px;
  border: 1px solid red;
  width: 45%;
}
</style>
